<template>
  <div>
    <el-table :data="tableData"  border 
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle">
      <el-table-column  label=""  width="60px">
        <!--插入图片链接的代码-->
        <template slot-scope="scope">
          <img :src="require('@/assets/trackingimg/' + scope.row.imgPath)" alt  class="table_img" >
        </template>
      </el-table-column>
      <el-table-column prop="progration" label="Progration" min-width="70px" align="center"></el-table-column>
      <el-table-column prop="centrifuge" label="Centrifuge" min-width="70px" align="center"></el-table-column>
      <el-table-column prop="filtration" label="Filtration" min-width="70px" align="center"></el-table-column>
      <el-table-column prop="minichip" label="Minichip Cooking" min-width="70px" align="center"></el-table-column>
      <el-table-column prop="cipStation" label="CIP Station" min-width="70px" align="center"></el-table-column>
    </el-table>
  </div>
</template>


<script>
export default {
    data(){
        return{
            tableData:[{
                imgPath:'cip.png',
                progration:'1',
                centrifuge:'2',
                filtration:'3',
                minichip:'4',
                cipStation:'5',
            },
            {
                imgPath:'idle.png',
                progration:'1',
                centrifuge:'2',
                filtration:'3',
                minichip:'4',
                cipStation:'5',
            },{
                imgPath:'running.png',
                progration:'1',
                centrifuge:'2',
                filtration:'3',
                minichip:'4',
                cipStation:'5',
            },]
        }
    },
     computed:{
      headerCellStyle:function(){
        return {'height': window.innerHeight * 0.9 * 0.85 * 0.43 *0.25 + 'px',
                        'font-size':'6px',
                        'font-weight':'bold'}
      },
      cellStyle:function(){
        return {'height': window.innerHeight * 0.9 * 0.85 * 0.42 *0.2 + 'px',
                        'padding':'5px',
                        'font-size':'18px',
                        'color':'grey'}
      },
    },
};
</script>


<style scoped>
  .table_img{
    width:150%;
    margin-left:-6px;
    margin-bottom:-3px;
    height:45px
  }
</style>
